<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
const chartData = [120, 200, 150, 80, 70, 110, 130];

onMounted(() => {
  const myChart = echarts.init(chartRef.value);
  const option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: chartData,
        type: "bar",
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style scoped></style>
